<template>
  <div class="bottom-nav">
    <div
      class="nav-item"
      :class="type == 1 ? 'active' : ''"
      @click="handleNav(1)"
    >
      <span class="nav-icon">🏠</span>
      <span class="nav-text">首页</span>
    </div>
    <div
      class="nav-item"
      :class="type == 2 ? 'active' : ''"
      @click="toPersonCenter(2)"
    >
      <span class="nav-icon">📨</span>
      <span class="nav-text">消息</span>
    </div>
    <div
      class="nav-item"
      :class="type == 3 ? 'active' : ''"
      @click="toPersonCenter(3)"
    >
      <span class="nav-icon">👤</span>
      <span class="nav-text">我的</span>
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElMessageBox } from "element-plus";
const router = useRouter();
const store = useStore();
const isLogin = computed(() => store.state.isLogin);
const props = defineProps({
  type: {
    type: String,
    default: 2,
  },
  post: {
    type: Object,
    default: () => {
      return {
        id: "",
        jtzw: "",
        zpNum: 0,
        edus: "",
        gznum: "",
        salary: "",
        cname_all: "",
        updatetime: "",
      };
    },
  },
});
let list = ref([
  {
    select: "@/assets/img/home.png",
    select_active: "@/assets/img/home_select.png",
  },
]);
const handleNav = (type) => {
  if (type == 1) {
    router.push("/");
  }
};
//如果登录进入个人中心
const toPersonCenter = (type) => {
  if (isLogin.value == 1) {
    if (type == 2) {
      router.push("/message/index");
    }
    if (type == 3) {
      location.href =
        "/myNew/m_3g.php?mode=index&doaction=index&detail=index&from_url=ex-serviceman";
    }
  } else {
    ElMessageBox.confirm("您当前还未登录，是否立即登录？", "提示", {
      confirmButtonText: "立即登录",
      cancelButtonText: "稍后再说",
      type: "warning",
    })
      .then(() => {
        handleLogin();
      })
      .catch(() => {});
  }
};
const handleLogin = (type) => {
  let url = "";
  if (location.host == "www.gzrc.com.cn") {
    url = "//m.gzrc.com.cn/mobile/login/?from_url=ex-serviceman";
  } else {
    url =
      "/webdev/m.gzrc.gov.cn/index.php?mode=index&doaction=login&from_url=ex-serviceman";
  }
  location.href = url;
};
</script>
<style lang="scss" scoped>
/* 底部导航样式 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  z-index: 999;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-icon {
  font-size: 20px;
  margin-bottom: 3px;
}

.nav-item.active {
  color: var(--army-green);
}
.footer {
  position: fixed;
  bottom: 0;
  background: #ffffff;
  height: 50px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  z-index: 999;
  border-top: 1px solid rgba(0, 0, 0, 0.33);
  .item {
    width: 33.33%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .img {
      width: 24px;
      height: 24px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .title {
      font-size: 10px;
      margin-top: 3px;
    }
    .active {
      color: #1296db;
    }
  }
}
</style>